{%  extends "base.html" %}
{% block content %}
    <div class="row page" id="docs" style="display:block;">
        <div class="col-md-12" style="">
            <h3><i class="glyphicon glyphicon-leaf"></i> What is jsTree?</h3>
            {% include "base_index.html" %}
            <ul class="nav nav-tabs">
                <li><a href="/" class="nava">Overview</a></li>
                <li  class="active" id="selected_menu"><a href="/doc/config" class="nava">Configuration</a></li>
                <li><a href="/doc/htmls" class="nava">HTML data</a></li>
                <li><a href="/doc/json" class="nava">JSON data</a></li>
                <li><a href="/doc/events" class="nava">Events</a></li>
                <li><a href="/doc/interaction" class="nava">Interaction</a></li>
            </ul>
            <div class="tab-content">
                <div id="config" class="tab-content-item">

                    <div class="row">
                        <div class="col-md-12">
                            <h3><i class="glyphicon glyphicon-leaf"></i> Configuring instances</h3>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <p>Creating an instance as described in the overview does not modify any of the
                                defaults:</p>
                            <pre><code>$('#jstree').jstree();</code></pre>
                            <p>You can change the defaults for all future instances:</p>
                            <pre><code>$.jstree.defaults.core.themes.variant = "large";
$('#jstree').jstree();</code></pre>
                            <p>But most of the time you will want to change the defaults only for the instance that is
                                being created. This is achieved by passing in a config object when creating the
                                instance:</p>
                            <pre><code>$('#jstree').jstree(<strong>{
  "plugins" : [ "wholerow", "checkbox" ]
}</strong>);</code></pre>
                            <p>As seen in the previous example - there is one special key in the config object named
                                <code>plugins</code>. It is an array of strings, which contain the names of the plugins
                                you want active on that instance.</p>
                            <p>All options that do not depend on a plugin are contained in a key of the config object
                                named <code>core</code>, the options for each plugin are contained within a key with the
                                same name as the plugin:</p>
                            <pre><code>$('#jstree').jstree({
  <strong>"core"</strong> : {
    "themes" : {
      "variant" : "large"
    }
  },
  <strong>"checkbox"</strong> : {
    "keep_selected_style" : false
  },
  "plugins" : [ "wholerow", "checkbox" ]
});</code></pre>

                            <p>You can have a look at all the <a href="/api/#/?q=$.jstree.defaults">options and their
                                default values</a>. This list is what you can configure on each instance.<br/>For
                                example, by default the tree allows multiple selection as stated in <code>$.jstree.defaults.core.multiple</code>,
                                to overwrite that make sure your config object contains <code>"core" : { "multiple" :
                                    false }</code>. If you have multiple overrides for the same key (like
                                <code>"core"</code> here), group them:</p>
                            <pre><code>$("#jstree").jstree({
  "core" : {
    "multiple" : false,
    "animation" : 0
  }
});</code></pre>
                        </div>
                    </div>

                </div>
            </div>

</div>
</div>
{% endblock %}
